html lang="en">
<head>
<meta charset="UTF-8">
<title>根据子导航高度而改变的导航</title>
<style>
*{margin: 0;padding: 0;list-style: none;text-decoration: none; font-size: 12px;font-family: "yahei"}
body{background: url('img/bg.jpg') no-repeat;}
#header{height: 74px;}
.logo{float: left; width: 150px;height: 74px;margin-left: 20px;}
.logo img{width: 100%;height: 74px;}
.nav{float: right;margin-right: 20px;}
.nav li{float: left; position: relative;}
.nav a{display: inline-block; line-height: 74px;padding: 0 12px;color: #999;font-weight: bold;transition:all 0.5s;}
.nav a:hover{color: #fff;}
.child{width: 140px; position: absolute;left: 0;top: 60px;display: none;}
.child a{line-height: 20px;display: inline-block; float: left; width: 100%;height: 20px;}
.bg{width: 100%;height: 74px;background: #000; border-bottom: 1px solid #000;opacity: 0.8;z-index: -1;position: absolute;top: 0;left: 0;}
</style>
<script src="js/jquery-1.7.2.js"></script>
<script>
$(function(){
    $('.nav li').hover(function(){
        $(this).children('a').eq(0).css({color:'#fff'});
        $('.bg').stop().animate({
            height:74+$(this).children('.child').height()
        });
        $(this).children('div').stop(false,true).slideDown();
        
    },function(){
        $(this).children('a').eq(0).css({color:'#999'})
        $('.bg').stop().animate({
            height:74
        });
        $(this).children('div').stop(false,true).slideUp();
        
    });
});
</script>
</head>
<body>
<div id="header">
    <div class="logo">
        <a href="#"><img src="img/0.jpg" alt=""></a>
    </div>
    <div class="nav">
        <ul>
            <li>
                <a href="#">男人范着装</a>
                <div class="child">
                    <a href="#">男人装 home</a>
                    <a href="#">男人装 selection</a>
                    <a href="#">男人装 uniform</a>
                    <a href="#">男人装 bsg</a>
                </div>
            </li>
            <li>
                <a href="#">优型工艺</a>
                <div class="child">
                    <a href="#">优型五大维度</a>
                    <a href="#">衬衫</a>
                    <a href="#">西服</a>
                </div>
            </li>
            <li>
                <a href="#">活出男人味</a>
                <div class="child">
                    <a href="#">男人范大片</a>
                    <a href="#">男人范杂志</a>
                </div>
            </li>
            <li>
                <a href="#">男人范俱乐部</a>
                <div class="child">
                    <a href="#">vip</a>
                    <a href="#">最新活动</a>
                    <a href="#">问卷调查</a>
                    <a href="#">问卷调查</a>
                    <a href="#">问卷调查</a>

                </div>
            </li>
            <li>
                <a href="#">招商加盟</a>
                <div class="child">
                    <a href="#">加盟支持</a>
                    <a href="#">加盟流程</a>
                </div>
            </li>
        </ul>
    </div>
    <div class="bg"></div>
</div>
</body>
</html>